
<template>
  <div class="product-detail">
    <!-- 头部 -->
    <header class="detail-nav">
      <i class="iconfont icon-left" @click="goBack"></i>
      <div class="nav-list">
        <span
          :class="{'active' : navIndex === 0}"
          data-type="product"
          @click="scrollToView($event)"
        >
          <i class="iconfont icon-location" v-show="navIndex === 0"></i>商品
        </span>
        <span :class="{'active' : navIndex === 1}" data-type="detail" @click="scrollToView($event)">
          <i class="iconfont icon-location" v-show="navIndex === 1"></i>商品详情
        </span>
        <span
          :class="{'active' : navIndex === 2}"
          data-type="recommend"
          @click="scrollToView($event)"
        >
          <i class="iconfont icon-location" v-show="navIndex === 2"></i>商品推荐
        </span>
      </div>
      <i class="iconfont icon-More"></i>
    </header>
    <!-- 轮播图 -->
    <section class="product-focus">
      <van-swipe :autoplay="3000" indicator-color="white" class="swiper-container">
        <van-swipe-item v-for="(item,index) in sliderList" :key="index">
          <img :src="item" class="swiper_img" alt />
        </van-swipe-item>
      </van-swipe>
    </section>
    <!-- 标题 -->
    <section class="detail-info">
      <p class="detail-info-name">{{ detailInfo.name }}</p>
      <p class="detail-info-subtitle">{{ detailInfo.subtitle }}</p>
      <div>
        <span class="detail-info-price">￥{{ detailInfo.price }}</span>
        <span class="detail-info-stock">库存{{ detailInfo.stock }}件</span>
      </div>
    </section>
    <!-- 商品详情 -->
    <section class="detail-content" ref="detailContent" id="content">
      <p class="detail-gap"></p>
      <ul>
        <li>概述</li>
        <li>参数</li>
        <li>安装服务</li>
        <li>常见问题</li>
      </ul>
      <div>
        <p v-for="(item,index) in detailImgs" :key="index">
          <img alt="详情图片" :src="item" width="790" height="796" />
          <br />
        </p>
      </div>
    </section>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button type="warning" text="加入购物车" @click="handShopCart" />
      <van-goods-action-button type="danger" text="立即购买" />
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :hide-stock="sku.hide_stock"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
        @stepper-change="onStepperChange"
      />
    </van-goods-action>
  </div>
</template>



<script>
//getProcuctDetail 商品详情  submitToCar添加商品
import { getProcuctDetail, submitToCar } from "../../api";
export default {
  data() {
    return {
      navIndex: 0, //导航索引
      productDetail: {}, //保存详情数据
      sliderList: [], //保存轮播图数据
      detailInfo: {},
      detailImgs: [],
      count: 1,
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。就是一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "001", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl:
                  "http://img.happymmall.com/570186f3-c0d2-4336-a1b7-3e1aff88f73a.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl:
                  "http://img.happymmall.com/570186f3-c0d2-4336-a1b7-3e1aff88f73a.jpg", // 用于预览显示的规格类目图片
              },
              {
                id: "002",
                name: "蓝色",
                imgUrl:
                  "http://img.happymmall.com/a73b6326-1204-4937-aa88-097c9eda8a2a.jpg",
                previewImgUrl:
                  "http://img.happymmall.com/a73b6326-1204-4937-aa88-097c9eda8a2a.jpg",
              },
            ],
          },
        ],
        // 所有 sku的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "001", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "001",
            stock_num: 50, // 当前 sku 组合对应的库存
          },
        ],
        price: "100", // 默认价格（单位元）
        stock_num: 100, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
      },
      goodsId: "0927",
      goods: {
        // 默认商品 sku 缩略图
        picture:
          "http://img.happymmall.com/570186f3-c0d2-4336-a1b7-3e1aff88f73a.jpg",
      },
    };
  },
  computed: {
    ids: function () {
      return this.$route.params.id;
    },
  },
  created() {
    this.fetchProductDetail();
  },
  methods: {
    //后退
    goBack() {
      this.$router.go(-1);
    },
    scrollToView(e) {
      let $type = e.target.getAttribute("data-type");
      switch ($type) {
        case "product":
          this.navIndex = 0;
          break;
        case "detail":
          this.navIndex = 1;
          break;
        case "recommend":
          this.navIndex = 2;
          break;
      }
    },
    fetchProductDetail() {
      getProcuctDetail({ id: this.$route.params.id }).then((res) => {
        // 处理详情数据
        this.detailInfo = res;
        // 1. 组装轮播图数据
        const list = res.subImages.split(",");
        const imageHost = res.imageHost;
        let tempList = [];
        list.forEach((element) => {
          tempList.push(imageHost + element);
        });
        this.sliderList = tempList;
        // 2. 组装详情展示图片
        const re = /(\/\/\S+(\.jpg|\.png|\.jpeg|\.webp))/g;
        let tempDetalImgs = [];
        this.detailInfo.detail.replace(re, (substr) => {
          tempDetalImgs.push(substr);
        });
        this.detailImgs = tempDetalImgs;
        // 3. 组装 SKU 数据
        this.setSku(this.detailInfo, tempList);
      });
    },
    setSku(detailInfo, tempList) {
      // 3. 组装 SKU 数据
      // 3.1 sku 规格 和 商品
      let tempTreeV = [];
      this.sku.list = [];
      for (let index = 0; index < 2; index++) {
        // 组装 suk.tree[0].v
        let obj = {
          id: index + 1, // skuValueId：规格值 id
          name: "红色", // skuValueName：规格值名称
          imgUrl: tempList[index], // 规格类目图片，只有第一个规格类目可以定义图片
          previewImgUrl: tempList[index], // 用于预览显示的规格类目图片
        };
        if (index === 1) {
          obj.name = "蓝色";
        }
        tempTreeV.push(obj);
        // 组装 sku.list
        let preItem = {
          id: detailInfo.id, // skuId
          s1: index + 1, // 规格类目 k_s 为 s1 的对应规格值 id
          price: detailInfo.price * 100, // 价格（单位分）
          stock_num: detailInfo.stock - 1, // 当前 sku 组合对应的库存
        };
        if (index === 1) {
          preItem.stock_num = 1;
        }
        this.sku.list.push(preItem);
      }
      this.sku.tree[0].v = tempTreeV;
      // 价格 和库存总数
      this.sku.price = this.detailInfo.price; // 默认价格（单位元）
      this.sku.stock_num = this.detailInfo.stock - 0; // 商品总库存

      // 商品展示的默认图
      this.goods.picture = tempList[0];
      //   设置 对应商品ID
      this.goodsId = detailInfo.id;
    },
    //购买
    onBuyClicked(data) {
      this.$toast(
        "buy:" + (data.selectedNum * data.selectedSkuComb.price) / 100
      );
    },
    //加入购物车
    onAddCartClicked() {
      const params = {
        productId: this.ids,
        count: this.count,
      };
      submitToCar(params).then((res) => {
        if (res.status == 0) {
          this.$router.push("/shopcart");
        } else {
          this.$toast(res.msg);
        }
      });
    },
    handShopCart() {
      if (!this.$store.getters.getIsLogin) {
        this.$dialog
          .confirm({
            // 点击 遮罩 关闭弹窗
            closeOnClickOverlay: true,
            title: "提示！",
            message: "未登录请登录",
          })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            console.log("关闭弹窗");
          });

        return;
      }

      this.show = true;
    },
    addToCar() {
      this.show = true;
    },
    onStepperChange(value) {
      this.count = value;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../commin/style/mixin";
.product-detail {
  width: 100%;

  .detail-nav {
    @include fj;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 88px;
    padding: 0 20px;
    line-height: 88px;
    box-sizing: border-box;
    z-index: 1000;
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;

    i {
      font-size: 50px;
      color: #000;
    }

    div span {
      padding: 0 20px;
      font-size: 28px;

      &.active {
        color: $red;
      }

      .iconfont {
        padding-right: 8px;
        font-size: 28px;
        color: $red;
      }
    }
  }
}
.product-focus {
  margin-top: 88px;

  .swiper-container {
    .swiper_img {
      width: 100%;
      height: 700px;
    }
  }
}
.detail-info {
  width: 100%;
  padding: 20px 30px;
  font-size: 30px;
  box-sizing: border-box;

  .detail-info-name {
    font-size: 40px;
    color: #333;
  }

  .detail-info-subtitle {
    padding: 10px 0;
    font-size: 28px;
    color: #999;
  }

  div {
    @include fj;
    height: 70px;
    line-height: 80px;
    padding: 10px 0;
    font-size: 32px;
    color: #999;

    .detail-info-price {
      color: $red;
      font-size: 44px;
    }
  }
}
.detail-content {
  width: 100%;

  .detail-gap {
    width: 100%;
    height: 20px;
    background: #eee;
  }

  ul {
    @include fj;
    width: 100%;
    margin: 20px 0;

    li {
      flex: 1;
      padding: 10px 0;
      text-align: center;
      font-size: 30px;
      border-right: 1px solid #999;
      box-sizing: border-box;

      &:last-child {
        border-right: none;
      }
    }
  }

  div {
    width: 100%;
    overflow: hidden;

    p {
      width: 100%;
      font-size: 40px;
      text-align: center;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>